<template>
  <button
    :class="buttonClasses"
    :disabled="disabled || loading"
    :type="nativeType"
    @click="handleClick"
  >
    <span v-if="loading" class="btn-loading">
      <svg class="btn-spinner" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-dashoffset="32">
          <animate attributeName="stroke-dasharray" dur="2s" values="0 32;16 16;0 32;0 32" repeatCount="indefinite"/>
          <animate attributeName="stroke-dashoffset" dur="2s" values="0;-16;-32;-32" repeatCount="indefinite"/>
        </circle>
      </svg>
    </span>
    
    <span v-if="(icon || $slots.icon) && !loading" :class="iconClasses">
      <slot name="icon">
        <el-icon v-if="icon">
          <component :is="icon" />
        </el-icon>
      </slot>
    </span>
    
    <span v-if="$slots.default" :class="textClasses">
      <slot />
    </span>
  </button>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 按钮类型
  type: {
    type: String,
    default: 'default',
    validator: (value) => ['primary', 'secondary', 'success', 'warning', 'error', 'info', 'default', 'text', 'link'].includes(value)
  },
  // 按钮大小
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  // 按钮变体
  variant: {
    type: String,
    default: 'solid',
    validator: (value) => ['solid', 'outline', 'ghost', 'soft'].includes(value)
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否加载中
  loading: {
    type: Boolean,
    default: false
  },
  // 图标
  icon: {
    type: [String, Object],
    default: null
  },
  // 图标位置
  iconPosition: {
    type: String,
    default: 'left',
    validator: (value) => ['left', 'right'].includes(value)
  },
  // 是否圆形
  round: {
    type: Boolean,
    default: false
  },
  // 是否圆角
  rounded: {
    type: Boolean,
    default: true
  },
  // 是否块级元素
  block: {
    type: Boolean,
    default: false
  },
  // 原生按钮类型
  nativeType: {
    type: String,
    default: 'button',
    validator: (value) => ['button', 'submit', 'reset'].includes(value)
  }
})

const emit = defineEmits(['click'])

// 计算按钮类名
const buttonClasses = computed(() => {
  const classes = ['base-button']
  
  // 类型样式
  classes.push(`base-button--${props.type}`)
  
  // 变体样式
  classes.push(`base-button--${props.variant}`)
  
  // 大小样式
  classes.push(`base-button--${props.size}`)
  
  // 状态样式
  if (props.disabled) classes.push('base-button--disabled')
  if (props.loading) classes.push('base-button--loading')
  if (props.round) classes.push('base-button--round')
  if (!props.rounded) classes.push('base-button--square')
  if (props.block) classes.push('base-button--block')
  
  return classes
})

// 图标类名
const iconClasses = computed(() => {
  const classes = ['base-button__icon']
  
  if (props.iconPosition === 'right') {
    classes.push('base-button__icon--right')
  }
  
  return classes
})

// 文本类名
const textClasses = computed(() => {
  const classes = ['base-button__text']
  
  if (props.icon && props.iconPosition === 'right') {
    classes.push('base-button__text--icon-right')
  } else if (props.icon) {
    classes.push('base-button__text--icon-left')
  }
  
  return classes
})

// 点击处理
const handleClick = (event) => {
  if (!props.disabled && !props.loading) {
    emit('click', event)
  }
}
</script>

<style scoped>
.base-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: 0.1s;
  cursor: pointer;
  outline: none;
  overflow: hidden;
}

.base-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 大小变体 */
.base-button--small {
  padding: 9px 15px;
  font-size: 12px;
}

.base-button--medium {
  padding: 12px 20px;
  font-size: 14px;
}

.base-button--large {
  padding: 13px 20px;
  font-size: 14px;
}

/* 形状变体 */
.base-button--round {
  border-radius: var(--radius-full);
}

.base-button--square {
  border-radius: 0;
}

.base-button--block {
  display: flex;
  width: 100%;
}

/* 主要按钮 - Solid 变体 */
.base-button--primary.base-button--solid {
  background: #409eff;
  color: #ffffff;
  border-color: #409eff;
}

.base-button--primary.base-button--solid:hover:not(.base-button--disabled):not(.base-button--loading) {
  background: #66b1ff;
  border-color: #66b1ff;
}

.base-button--primary.base-button--solid:active:not(.base-button--disabled):not(.base-button--loading) {
  background: #3a8ee6;
  border-color: #3a8ee6;
}

/* 主要按钮 - Outline 变体 */
.base-button--primary.base-button--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.base-button--primary.base-button--outline:hover:not(.base-button--disabled):not(.base-button--loading) {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}

/* 主要按钮 - Ghost 变体 */
.base-button--primary.base-button--ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: transparent;
}

.base-button--primary.base-button--ghost:hover:not(.base-button--disabled):not(.base-button--loading) {
  background: var(--color-primary-100);
  color: var(--color-primary-dark);
}

/* 主要按钮 - Soft 变体 */
.base-button--primary.base-button--soft {
  background: var(--color-primary-100);
  color: var(--color-primary-dark);
  border-color: transparent;
}

.base-button--primary.base-button--soft:hover:not(.base-button--disabled):not(.base-button--loading) {
  background: var(--color-primary-200);
  color: var(--color-primary-dark);
}

/* 次要按钮 */
.base-button--secondary.base-button--solid {
  background: #909399;
  color: #ffffff;
  border-color: #909399;
}

.base-button--secondary.base-button--solid:hover:not(.base-button--disabled):not(.base-button--loading) {
  background: #a6a9ad;
  border-color: #a6a9ad;
}

.base-button--secondary.base-button--outline {
  background: transparent;
  color: #909399;
  border-color: #dcdfe6;
}

.base-button--secondary.base-button--outline:hover:not(.base-button--disabled):not(.base-button--loading) {
  background: #909399;
  color: #ffffff;
  border-color: #909399;
}

/* 成功按钮 */
.base-button--success.base-button--solid {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border-color: transparent;
}

.base-button--success.base-button--solid:hover:not(.base-button--disabled):not(.base-button--loading) {
  background: var(--color-success-dark);
  box-shadow: var(--shadow-sm);
}

/* 警告按钮 */
.base-button--warning.base-button--solid {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border-color: transparent;
}

.base-button--warning.base-button--solid:hover:not(.base-button--disabled):not(.base-button--loading) {
  background: var(--color-warning-dark);
  box-shadow: var(--shadow-sm);
}

/* 错误按钮 */
.base-button--error.base-button--solid {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border-color: transparent;
}

.base-button--error.base-button--solid:hover:not(.base-button--disabled):not(.base-button--loading) {
  background: var(--color-error-dark);
  box-shadow: var(--shadow-sm);
}

/* 默认按钮 */
.base-button--default.base-button--solid {
  background: #ffffff;
  color: #606266;
  border-color: #dcdfe6;
}

.base-button--default.base-button--solid:hover:not(.base-button--disabled):not(.base-button--loading) {
  background: #ecf5ff;
  border-color: #c6e2ff;
  color: #409eff;
}

/* 文本按钮 */
.base-button--text {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: var(--spacing-sm) var(--spacing-md);
}

.base-button--text.base-button--primary {
  color: var(--color-primary);
}

.base-button--text.base-button--primary:hover:not(.base-button--disabled):not(.base-button--loading) {
  color: var(--color-primary-dark);
  background: var(--color-primary-50) !important;
}

/* 链接按钮 */
.base-button--link {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 0;
  text-decoration: underline;
}

.base-button--link:hover:not(.base-button--disabled):not(.base-button--loading) {
  text-decoration: none;
}

/* 禁用状态 */
.base-button--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* 加载状态 */
.base-button--loading {
  cursor: wait;
  pointer-events: none;
}

.btn-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-spinner {
  width: 1em;
  height: 1em;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 图标样式 */
.base-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
}

.base-button__icon--right {
  order: 2;
}

.base-button__text {
  display: inline-flex;
  align-items: center;
}

.base-button__text--icon-right {
  order: 1;
}

/* 响应式设计 */
@media (max-width: 640px) {
  .base-button--large {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
  }
  
  .base-button--medium {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
  }
}
</style>
